<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单演奏 | 制作: 小透明</title>

    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./static/waves/waves.min.css">
    <link rel="icon" href="./image/iconmini-50px.png">
    <link rel="stylesheet" href="./css/keyboard.css">
    <link rel="stylesheet" href="./static/font/css/font-awesome.min.css">

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.js"></script>
    <script src="./static/waves/waves.min.js"></script>
    <script src="./js/function.js"></script>
    <script src="./js/auto.js"></script>
    <script src="./js/base.js"></script>
    <script src="./js/keyboard.js"></script>
    <!-- 曲谱文件数据 -->
    <script src="./mscore/scores.json?callback=hookScore"></script>
    <script src="./mscore/config.json?callback=hookConfig"></script>
</head>

<body>
    <div id="contents">
        <div id="toolbar">
            <div id="navibtns">
                <div id="titlehead">
                    <div class="titleicon">
                        <img src="./image/iconmini-50px.png" style="height: 30px;">
                        <div id="author">制作: 小透明</div>
                    </div>
                </div>

                <button class="btn btn-success" id="addscore">编曲</button>
                <button class="btn btn-info" id="autoplaybtn">自动演奏</button>
                <button class="btn btn-info btn-active" id="freeplaybtn">自由演奏</button>

                <div id="choseMusical" class="headinline choseSelect">
                    <select name="musicals">
                        <option value="guzheng">古筝</option>
                    </select>
                </div>

                <div id="chosetone" class="headinline choseSelect">
                    <select name="tones">
                        <option value="C">C</option>
                    </select>
                </div>

                <div id="scoreslist" class="headinline choseSelect">
                    <select name="scores"></select>
                </div>

                <div class="splayers headinline">
                    <div id="playspeed" class="headinline">
                        <span>播放速度:</span>
                        <input type="text" name="speed" value="500" style="width: 50px;">
                        毫秒
                    </div>
    
                    <div class="headinline">
                        <button class="btn btn-info" id="doplay">播放 <i class="fa fa-play" aria-hidden="true"></i></button>
                        <button class="btn btn-info" id="docontinue">继续 <i class="fa fa-play" aria-hidden="true"></i></button>                    
                        <button class="btn btn-warning" id="dopause">暂停 <i class="fa fa-pause" aria-hidden="true"></i></button>
                        <button class="btn btn-error" id="dostop">停止 <i class="fa fa-stop" aria-hidden="true"></i></button>
                    </div>
                </div>
                
            </div>


        </div>

        <div id="pcontents">
            <!--音轨-->
            <div id="navi">
                <ul class="trackhead">
                    <!--音轨位置-->
                </ul>
            </div>
            <!--音轨结束-->

            <!--琴码-->
            <div id="piano_code"></div>
            <!--琴码结束-->

            <div>
                <!--琴谱背景-->
                <div id="score_back"></div>
                <!--琴谱背景结束-->
                <div id="trackdetail">
                    <ul>
                        <!--琴谱条-->
                    </ul>
                </div>
                <!--键盘控件-->
                <div class="key-wrapper">
                    <ul>
                        <li class="drum" data-key="1" data-code="49">1</li>
                        <li class="drum" data-key="2" data-code="50">2</li>
                        <li class="drum" data-key="3" data-code="51">3</li>
                        <li class="drum" data-key="4" data-code="52">4</li>
                        <li class="synth" data-key="5" data-code="53">5</li>
                        <li class="synth" data-key="6" data-code="54">6</li>
                        <li class="synth" data-key="7" data-code="55">7</li>
                        <li class="synth" data-key="8" data-code="56">8</li>
                    </ul>
                    <ul>
                        <li class="drum" data-key="q" data-code="81">q</li>
                        <li class="drum" data-key="w" data-code="87">w</li>
                        <li class="drum" data-key="e" data-code="69">e</li>
                        <li class="drum" data-key="r" data-code="82">r</li>
                        <li class="" data-key="t" data-code="84">t</li>
                        <li class="bass" data-key="y" data-code="89">y</li>
                        <li class="bass" data-key="u" data-code="85">u</li>
                        <li class="pad" data-key="i" data-code="73">i</li>
                    </ul>
                    <ul>
                        <li class="drum" data-key="a" data-code="65">a</li>
                        <li class="drum" data-key="s" data-code="83">s</li>
                        <li class="drum" data-key="d" data-code="68">d</li>
                        <li class="drum" data-key="f" data-code="70">f</li>
                        <li class="" data-key="g" data-code="71">g</li>
                        <li class="bass" data-key="h" data-code="72">h</li>
                        <li class="bass" data-key="j" data-code="74">j</li>
                        <li class="loop" data-key="k" data-code="75">k</li>
                    </ul>
                </div>
                <!--键盘控件结束-->

            </div>
            
            <!-- <div id="back_plate"></div> -->
        </div>

        <div style="display: none!important;" id="audiocontent"></div>
        <input type="hidden" name="stopflag" value="0">
        <input type="hidden" name="pauseflag" value="0">
    </div>


</body>

</html>